<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <div style="padding: 20px; font-weight: 500">病种列表</div>
                <ul style="list-style: none; padding-left: 20px">
                    <li v-for="disease in diseases" :key="disease" @click="selectDisease(disease)"
                        style="margin: 10px 0; cursor: pointer; padding: 5px">
                        {{ disease }}
                    </li>
                </ul>
            </el-aside>

            <el-container>
                <el-header style="padding: 0 20px; background: #f5f7fa">
                    <el-button type="success" plain @click="openAdd" style="margin: 20px 0">
                        添加指标
                    </el-button>
                </el-header>

                <el-main style="padding: 20px">
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column prop="indicatorsName" label="种病名称" width="120" />
                        <el-table-column prop="indicatorsId" label="指标编码" width="120" />
                        <el-table-column prop="indicatorsCode" label="指标名称" width="200" />
                        <el-table-column prop="indicatorsValue" label="参考值" width="250" />

                        <el-table-column fixed="right" label="操作" min-width="120">
                            <template v-slot="scope">
                                <el-button link type="primary" size="small"
                                    @click="delindica(scope.row.iId)">删除</el-button>
                                <el-button link type="primary" size="small" @click="openAdd2(scope.row)">修改</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!-- 弹框添加 -->
                    <el-dialog v-model="dialogFormVisible" title="添加慢病指标" width="500" center draggable>
                        <el-form :model="form" label-width="80px" style="max-width: 350px">
                            <el-form-item label="病种名称" prop="indicatorsName">
                                <el-input v-model="form.indicatorsName" readonly /> <!-- 设为只读，防止手动修改 -->
                            </el-form-item>
                            <el-form-item label="指标编码" prop="indicatorsId">
                                <el-input v-model="form.indicatorsId" />
                            </el-form-item>
                            <el-form-item label="指标名称" prop="indicatorsCode">
                                <el-input v-model="form.indicatorsCode" />
                            </el-form-item>
                            <el-form-item label="参考值" prop="indicatorsValue">
                                <el-input v-model="form.indicatorsValue" />
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <el-button @click="dialogFormVisible = false">取消</el-button>
                            <el-button type="primary" @click="addDiseaseIndicators">添加</el-button>
                        </template>
                    </el-dialog>

                    <!-- 弹框修改 -->
                    <el-dialog v-model="dialogFormVisible2" title="修改慢病指标" width="500" center draggable>
                        <el-form :model="form" label-width="80px" style="max-width: 350px">
                            <el-form-item label="病种名称" prop="indicatorsName">
                                <el-input v-model="form.indicatorsName" />
                            </el-form-item>
                            <el-form-item label="指标编码" prop="indicatorsId">
                                <el-input v-model="form.indicatorsId" />
                            </el-form-item>
                            <el-form-item label="指标名称" prop="indicatorsCode">
                                <el-input v-model="form.indicatorsCode" />
                            </el-form-item>
                            <el-form-item label="参考值" prop="indicatorsValue">
                                <el-input v-model="form.indicatorsValue" />
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <el-button @click="dialogFormVisible2 = false">取消</el-button>
                            <el-button type="primary" @click="updateDiseaseIndicators">修改</el-button>
                        </template>
                    </el-dialog>

                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, reactive, ref } from 'vue'
import { useCounterStore } from '@/stores/counter';
const apiUrl = import.meta.env.VITE_APP_API_URL;
const store = useCounterStore();

const form = reactive({
    iId: 0,
    indicatorsName: "高血压",
    indicatorsId: '',
    indicatorsCode: '',
    indicatorsValue: '',
    isDel: false,
});

// 病种列表
const diseases = ref(['高血压', '高血糖', '高血脂']);

// 点击病种时赋值并刷新页面
const selectDisease = (name: string) => {
    form.indicatorsName = name || "高血压"; // 直接赋值
    getDiseaseIndicators(); // 刷新页面
};
//#region 添加弹框
const dialogFormVisible = ref(false);
// 打开弹框时清空非病种字段
const openAdd = () => {
    dialogFormVisible.value = true;
    form.indicatorsId = '';
    form.indicatorsCode = '';
    form.indicatorsValue = '';
};

// 添加指标
const addDiseaseIndicators = () => {
    if (!form.indicatorsName) {
        ElMessage.warning('请先选择病种');
        return;
    }

    axios.post(apiUrl+'/T8/BasicSettings/AddDiseaseIndicators', form)
        .then(res => {
            if (res.data.code === 212) {
                ElMessage.success(res.data.msg);
                dialogFormVisible.value = false;
                getDiseaseIndicators();
            } else {
                ElMessage.error(res.data.msg);
            }
        });
};
//#endregion

//#region 修改弹框

const dialogFormVisible2 = ref(false);
const openAdd2 = (row: any) => {
    dialogFormVisible2.value = true;
    form.iId = row.iId;
    form.indicatorsName = row.indicatorsName;
    form.indicatorsId = row.indicatorsId;
    form.indicatorsCode = row.indicatorsCode;
    form.indicatorsValue = row.indicatorsValue;
};

//修改
const updateDiseaseIndicators = () => {
    axios.post(apiUrl+'/T8/BasicSettings/HaUpdateDiseaseIndicatorsndle', form)
        .then(res => {
            if (res.data.code === 206) {
                ElMessage.success(res.data.msg);
                dialogFormVisible2.value = false;
                getDiseaseIndicators();
            }
            else {
                ElMessage.error(res.data.msg);
                console.log(res.data)
            }
        })
}
//#endregion

// 查询指标
const tableData = ref([]);
const getDiseaseIndicators = () => {
    axios.get(apiUrl+'/T7/BasicSettings/GetDiseaseIndicators', {
        params: {
            IndicatorsName: form.indicatorsName || "高血压" // 使用 form.indicatorsName 作为查询条件
        }
    })
        .then(res => {
            tableData.value = res.data.data || [];
        });
};

//删除
const delindica = (id: any) => {

    ElMessageBox.confirm(
        '确定要删除吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.post(apiUrl+'/T8/BasicSettings/DeleteDiseaseIndicators', { IId: id })
                .then(res => {
                    if (res.data.code === 204) {
                        ElMessage.success(res.data.msg);
                        getDiseaseIndicators();
                    }
                    else {
                        ElMessage.error(res.data.msg);
                    }
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}
onMounted(() => {
    getDiseaseIndicators(); // 初始化时查询高血压指标
});
</script>

<style>
li {
    list-style: none;
    cursor: pointer;
    padding: 5px 10px;
    transition: background 0.3s;
}

li:hover {
    background: #f5f7fa;
    border-radius: 4px;
}

li:active {
    background-color: #b3d4fc;
    /* 点击时的背景颜色，可按需调整 */
    color: #000;
    /* 点击时的文字颜色，可按需调整 */
}
</style>